@threadlabs/looma 0.28.20 → 0.28.21

package/editor/chunks/extensions.js

@@ -1732,144 +1732,11 @@ var TaskList = Node$1.create({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@tiptap+extension-task-item@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2/node_modules/@tiptap/extension-task-item/dist/index.js
-/**
-* Matches a task item to a - [ ] on input.
-*/
-var inputRegex$4 = /^\s*(\[([( |x])?\])\s$/;
-/**
-* This extension allows you to create task items.
-* @see https://www.tiptap.dev/api/nodes/task-item
-*/
-var TaskItem = Node$1.create({
-	name: "taskItem",
-	addOptions() {
-		return {
-			nested: false,
-			HTMLAttributes: {},
-			taskListTypeName: "taskList",
-			a11y: void 0
-		};
-	},
-	content() {
-		return this.options.nested ? "paragraph block*" : "paragraph+";
-	},
-	defining: true,
-	addAttributes() {
-		return { checked: {
-			default: false,
-			keepOnSplit: false,
-			parseHTML: (element) => {
-				const dataChecked = element.getAttribute("data-checked");
-				return dataChecked === "" || dataChecked === "true";
-			},
-			renderHTML: (attributes) => ({ "data-checked": attributes.checked })
-		} };
-	},
-	parseHTML() {
-		return [{
-			tag: `li[data-type="${this.name}"]`,
-			priority: 51
-		}];
-	},
-	renderHTML({ node, HTMLAttributes }) {
-		return [
-			"li",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }),
-			[
-				"label",
-				["input", {
-					type: "checkbox",
-					checked: node.attrs.checked ? "checked" : null
-				}],
-				["span"]
-			],
-			["div", 0]
-		];
-	},
-	addKeyboardShortcuts() {
-		const shortcuts = {
-			Enter: () => this.editor.commands.splitListItem(this.name),
-			"Shift-Tab": () => this.editor.commands.liftListItem(this.name)
-		};
-		if (!this.options.nested) return shortcuts;
-		return {
-			...shortcuts,
-			Tab: () => this.editor.commands.sinkListItem(this.name)
-		};
-	},
-	addNodeView() {
-		return ({ node, HTMLAttributes, getPos, editor }) => {
-			const listItem = document.createElement("li");
-			const checkboxWrapper = document.createElement("label");
-			const checkboxStyler = document.createElement("span");
-			const checkbox = document.createElement("input");
-			const content = document.createElement("div");
-			const updateA11Y = () => {
-				var _a, _b;
-				checkbox.ariaLabel = ((_b = (_a = this.options.a11y) === null || _a === void 0 ? void 0 : _a.checkboxLabel) === null || _b === void 0 ? void 0 : _b.call(_a, node, checkbox.checked)) || `Task item checkbox for ${node.textContent || "empty task item"}`;
-			};
-			updateA11Y();
-			checkboxWrapper.contentEditable = "false";
-			checkbox.type = "checkbox";
-			checkbox.addEventListener("mousedown", (event) => event.preventDefault());
-			checkbox.addEventListener("change", (event) => {
-				if (!editor.isEditable && !this.options.onReadOnlyChecked) {
-					checkbox.checked = !checkbox.checked;
-					return;
-				}
-				const { checked } = event.target;
-				if (editor.isEditable && typeof getPos === "function") editor.chain().focus(void 0, { scrollIntoView: false }).command(({ tr }) => {
-					const position = getPos();
-					if (typeof position !== "number") return false;
-					const currentNode = tr.doc.nodeAt(position);
-					tr.setNodeMarkup(position, void 0, {
-						...currentNode === null || currentNode === void 0 ? void 0 : currentNode.attrs,
-						checked
-					});
-					return true;
-				}).run();
-				if (!editor.isEditable && this.options.onReadOnlyChecked) {
-					if (!this.options.onReadOnlyChecked(node, checked)) checkbox.checked = !checkbox.checked;
-				}
-			});
-			Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
-				listItem.setAttribute(key, value);
-			});
-			listItem.dataset.checked = node.attrs.checked;
-			checkbox.checked = node.attrs.checked;
-			checkboxWrapper.append(checkbox, checkboxStyler);
-			listItem.append(checkboxWrapper, content);
-			Object.entries(HTMLAttributes).forEach(([key, value]) => {
-				listItem.setAttribute(key, value);
-			});
-			return {
-				dom: listItem,
-				contentDOM: content,
-				update: (updatedNode) => {
-					if (updatedNode.type !== this.type) return false;
-					listItem.dataset.checked = updatedNode.attrs.checked;
-					checkbox.checked = updatedNode.attrs.checked;
-					updateA11Y();
-					return true;
-				}
-			};
-		};
-	},
-	addInputRules() {
-		return [wrappingInputRule({
-			find: inputRegex$4,
-			type: this.type,
-			getAttributes: (match) => ({ checked: match[match.length - 1] === "x" })
-		})];
-	}
-});
-//#endregion
 //#region ../../node_modules/.pnpm/@tiptap+extension-blockquote@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-blockquote/dist/index.js
 /**
 * Matches a blockquote to a `>` as input.
 */
-var inputRegex$3 = /^\s*>\s$/;
+var inputRegex$4 = /^\s*>\s$/;
 /**
 * This extension allows you to create blockquotes.
 * @see https://tiptap.dev/api/nodes/blockquote
@@ -1910,7 +1777,7 @@ var Blockquote = Node$1.create({
 	},
 	addInputRules() {
 		return [wrappingInputRule({
-			find: inputRegex$3,
+			find: inputRegex$4,
 			type: this.type
 		})];
 	}
@@ -3861,7 +3728,7 @@ var Link = Mark.create({
 /**
 * Matches an image to a ![image](src "title") on input.
 */
-var inputRegex$2 = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+var inputRegex$3 = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
 /**
 * This extension allows you to insert images.
 * @see https://www.tiptap.dev/api/nodes/image
@@ -3905,7 +3772,7 @@ var Image = Node$1.create({
 	},
 	addInputRules() {
 		return [nodeInputRule({
-			find: inputRegex$2,
+			find: inputRegex$3,
 			type: this.type,
 			getAttributes: (match) => {
 				const [, , alt, src, title] = match;
@@ -3962,7 +3829,7 @@ var LoomaImage = Image.extend({ addAttributes() {
 /**
 * Matches a highlight to a ==highlight== on input.
 */
-var inputRegex$1 = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
+var inputRegex$2 = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
 /**
 * Matches a highlight to a ==highlight== on paste.
 */
@@ -4021,7 +3888,7 @@ var Highlight = Mark.create({
 	},
 	addInputRules() {
 		return [markInputRule({
-			find: inputRegex$1,
+			find: inputRegex$2,
 			type: this.type
 		})];
 	},
@@ -4244,7 +4111,7 @@ var Placeholder = Extension.create({
 *  This ensures that any text between backticks is formatted as code,
 *  regardless of the surrounding characters (exception being another backtick).
 */
-var inputRegex = /(^|[^`])`([^`]+)`(?!`)/;
+var inputRegex$1 = /(^|[^`])`([^`]+)`(?!`)/;
 /**
 * Matches inline code while pasting.
 */
@@ -4289,7 +4156,7 @@ var Code = Mark.create({
 	},
 	addInputRules() {
 		return [markInputRule({
-			find: inputRegex,
+			find: inputRegex$1,
 			type: this.type
 		})];
 	},
@@ -6431,6 +6298,196 @@ var LoomaBlockSelection = Extension.create({
 	}
 });
 //#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-task-item@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2/node_modules/@tiptap/extension-task-item/dist/index.js
+/**
+* Matches a task item to a - [ ] on input.
+*/
+var inputRegex = /^\s*(\[([( |x])?\])\s$/;
+/**
+* This extension allows you to create task items.
+* @see https://www.tiptap.dev/api/nodes/task-item
+*/
+var TaskItem = Node$1.create({
+	name: "taskItem",
+	addOptions() {
+		return {
+			nested: false,
+			HTMLAttributes: {},
+			taskListTypeName: "taskList",
+			a11y: void 0
+		};
+	},
+	content() {
+		return this.options.nested ? "paragraph block*" : "paragraph+";
+	},
+	defining: true,
+	addAttributes() {
+		return { checked: {
+			default: false,
+			keepOnSplit: false,
+			parseHTML: (element) => {
+				const dataChecked = element.getAttribute("data-checked");
+				return dataChecked === "" || dataChecked === "true";
+			},
+			renderHTML: (attributes) => ({ "data-checked": attributes.checked })
+		} };
+	},
+	parseHTML() {
+		return [{
+			tag: `li[data-type="${this.name}"]`,
+			priority: 51
+		}];
+	},
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			"li",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }),
+			[
+				"label",
+				["input", {
+					type: "checkbox",
+					checked: node.attrs.checked ? "checked" : null
+				}],
+				["span"]
+			],
+			["div", 0]
+		];
+	},
+	addKeyboardShortcuts() {
+		const shortcuts = {
+			Enter: () => this.editor.commands.splitListItem(this.name),
+			"Shift-Tab": () => this.editor.commands.liftListItem(this.name)
+		};
+		if (!this.options.nested) return shortcuts;
+		return {
+			...shortcuts,
+			Tab: () => this.editor.commands.sinkListItem(this.name)
+		};
+	},
+	addNodeView() {
+		return ({ node, HTMLAttributes, getPos, editor }) => {
+			const listItem = document.createElement("li");
+			const checkboxWrapper = document.createElement("label");
+			const checkboxStyler = document.createElement("span");
+			const checkbox = document.createElement("input");
+			const content = document.createElement("div");
+			const updateA11Y = () => {
+				var _a, _b;
+				checkbox.ariaLabel = ((_b = (_a = this.options.a11y) === null || _a === void 0 ? void 0 : _a.checkboxLabel) === null || _b === void 0 ? void 0 : _b.call(_a, node, checkbox.checked)) || `Task item checkbox for ${node.textContent || "empty task item"}`;
+			};
+			updateA11Y();
+			checkboxWrapper.contentEditable = "false";
+			checkbox.type = "checkbox";
+			checkbox.addEventListener("mousedown", (event) => event.preventDefault());
+			checkbox.addEventListener("change", (event) => {
+				if (!editor.isEditable && !this.options.onReadOnlyChecked) {
+					checkbox.checked = !checkbox.checked;
+					return;
+				}
+				const { checked } = event.target;
+				if (editor.isEditable && typeof getPos === "function") editor.chain().focus(void 0, { scrollIntoView: false }).command(({ tr }) => {
+					const position = getPos();
+					if (typeof position !== "number") return false;
+					const currentNode = tr.doc.nodeAt(position);
+					tr.setNodeMarkup(position, void 0, {
+						...currentNode === null || currentNode === void 0 ? void 0 : currentNode.attrs,
+						checked
+					});
+					return true;
+				}).run();
+				if (!editor.isEditable && this.options.onReadOnlyChecked) {
+					if (!this.options.onReadOnlyChecked(node, checked)) checkbox.checked = !checkbox.checked;
+				}
+			});
+			Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
+				listItem.setAttribute(key, value);
+			});
+			listItem.dataset.checked = node.attrs.checked;
+			checkbox.checked = node.attrs.checked;
+			checkboxWrapper.append(checkbox, checkboxStyler);
+			listItem.append(checkboxWrapper, content);
+			Object.entries(HTMLAttributes).forEach(([key, value]) => {
+				listItem.setAttribute(key, value);
+			});
+			return {
+				dom: listItem,
+				contentDOM: content,
+				update: (updatedNode) => {
+					if (updatedNode.type !== this.type) return false;
+					listItem.dataset.checked = updatedNode.attrs.checked;
+					checkbox.checked = updatedNode.attrs.checked;
+					updateA11Y();
+					return true;
+				}
+			};
+		};
+	},
+	addInputRules() {
+		return [wrappingInputRule({
+			find: inputRegex,
+			type: this.type,
+			getAttributes: (match) => ({ checked: match[match.length - 1] === "x" })
+		})];
+	}
+});
+//#endregion
+//#region src/editor/extensions/task-item.ts
+var taskSequence = 0;
+/** A task item's accessible name: its text, or "Task" while it has none. */
+var taskName = (node) => node.textContent.trim() || "Task";
+/**
+* Tiptap's task item with each checkbox named by its item's text, so a screen reader announces
+* the task rather than an unnamed checkbox. In the editor the checkbox points at the item's own
+* content with `aria-labelledby`, so the name follows every edit; saved HTML has no element to point
+* at, so its checkbox carries the text as `aria-label`.
+*/
+var LoomaTaskItem = TaskItem.extend({
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			"li",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }),
+			[
+				"label",
+				["input", {
+					type: "checkbox",
+					checked: node.attrs.checked ? "checked" : null,
+					"aria-label": taskName(node)
+				}],
+				["span"]
+			],
+			["div", 0]
+		];
+	},
+	addNodeView() {
+		const parent = this.parent();
+		return (props) => {
+			const view = parent(props);
+			const checkbox = view.dom instanceof Element ? view.dom.querySelector("input[type=\"checkbox\"]") : null;
+			const content = view.contentDOM;
+			if (!checkbox || !(content instanceof HTMLElement)) return view;
+			content.id ||= `looma-task-${++taskSequence}`;
+			const name = (node) => {
+				if (node.textContent.trim()) {
+					checkbox.setAttribute("aria-labelledby", content.id);
+					checkbox.removeAttribute("aria-label");
+				} else {
+					checkbox.removeAttribute("aria-labelledby");
+					checkbox.setAttribute("aria-label", "Task");
+				}
+			};
+			name(props.node);
+			return {
+				...view,
+				update: (...args) => {
+					const kept = view.update?.(...args) ?? false;
+					if (kept) name(args[0]);
+					return kept;
+				}
+			};
+		};
+	}
+});
+//#endregion
 //#region src/editor/extensions/list-behavior.ts
 /**
 * Looma list behavior extension:
@@ -10900,7 +10957,7 @@ function getDefaultEditorExtensions(options = {}) {
 		OrderedList,
 		ListItem,
 		TaskList,
-		TaskItem.configure({ nested: false }),
+		LoomaTaskItem.configure({ nested: false }),
 		Blockquote,
 		calloutNodeView ? LoomaCallout.extend({ addNodeView: () => calloutNodeView }) : LoomaCallout,
 		LoomaChip,

package/editor/extensions/task-item.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tiptap's task item with each checkbox named by its item's text, so a screen reader announces
+ * the task rather than an unnamed checkbox. In the editor the checkbox points at the item's own
+ * content with `aria-labelledby`, so the name follows every edit; saved HTML has no element to point
+ * at, so its checkbox carries the text as `aria-label`.
+ */
+export declare const LoomaTaskItem: import("@tiptap/core").Node<import("@tiptap/extension-task-item").TaskItemOptions, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.20",
+  "version": "0.28.21",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",